<!--
 * @Author: quit
 * @Date: 2021-12-23 17:46:37
 * @LastEditTime: 2022-01-15 14:50:18
 * @Descripttion: ToPo 顶部栏区域
-->
<template>
    <div id="topo-navber">
        <el-card>
            <div class="top-card">
                <div class="left-box">
                    <!-- 页面选择 -->
                    <div class="page-checked">
                        <el-button size="small" type="primary" @click="drawer = true">页面选择</el-button>
                    </div>
                    <div class="btns">
                        <el-button size="small" type="primary">添加设备</el-button>
                    </div>
                </div>
                <div class="content-box">
                    <div class="page-input">{{ checkedPage }}</div>
                </div>
                <div class="right-box">
                    <div class="btns">
                        <el-button size="small" type="primary">删除元素</el-button>
                        <el-button size="small" type="primary">页面预览</el-button>
                    </div>
                    <!-- <el-button>当前页面元素</el-button> -->
                    <!-- 画布显示百分比滑动栏 -->
                    <div class="slide-label">画布缩放</div>
                    <div class="slide">
                        <el-slider v-model="selectedValue" :min="50" :max="200" show-input :format-tooltip="slideTooltip" />
                    </div>
                </div>
            </div>
        </el-card>
        <!-- 页面选择弹出框 -->
        <el-drawer
            title="选择编辑页面"
            size="500"
            :modal="false"
            :visible.sync="drawer"
            direction="ltr"
            :before-close="handleClose"
            @open="drawerOpen"
            @opened="drawerOpened"
        >
            <div id="drawer-content" style="width: 100%; height: 100%; padding: 15px">
                <!-- 分页 -->
                <el-pagination
                    :current-page="pages.page"
                    :page-sizes="[1, 5, 10, 15, 20]"
                    :page-size="pages.size"
                    layout="prev, pager, next, total, sizes, jumper"
                    :total="pages.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
                <!--  -->
                <el-form :inline="true" :model="drawerSearchForm" class="demo-form-inline">
                    <el-form-item :label="'页面名称'">
                        <el-input v-model="drawerSearchForm.piceName" :placeholder="'请输入图片名称'" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-zoom-in">{{ $t('button.search') }}</el-button>
                    </el-form-item>
                </el-form>
                <el-table v-loading="loading" :max-height="tableHeight" :data="tableData" highlight-current-row @current-change="handleCurrentTableRow">
                    <el-table-column property="picid" label="页面ID" min-width="80" />
                    <el-table-column property="picname" label="页面名称" min-width="200" />
                </el-table>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import $ from 'jquery'
import { mapMutations } from 'vuex'
import { getData } from '@/utils/auth'
import { getUserPicPageList } from '@/api/BotRequest'

export default {
    name: 'ToPoNavbar',
    components: {},
    data() {
        return {
            botData: null,
            drawer: false,
            loading: false,
            tableHeight: null,
            tableData: [],
            pages: { page: 1, size: 20, total: 0 },
            checkedPage: '请选择编辑页面',
            drawerSearchForm: { piceName: '' }
        }
    },
    // 监听属性 类似于data概念
    computed: {
        // 不使用mapState 用于解决 Computed property "XXX" was assigned to but it has no setter. 问题
        selectedValue: {
            get: function() {
                return this.$store.state.ToPo.selectedValue
            },
            set: function() {}
        }
    },
    // 监控data中的数据变化
    watch: {},
    created() {
        this.botData = getData('BotData')
    }, // 生命周期 - 创建完成（可以访问当前this实例）
    mounted() {
        window.onresize = () => {
            this.setTableHeight()
        }
    }, // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
    // 方法集合
    methods: {
        ...mapMutations('ToPo', ['setMainSize', 'setAppPageData']),
        // 动态设置表格高
        setTableHeight() {
            let num = $(window).height()
            let num2 = $('.el-pagination').height() + 155
            this.tableHeight = num - num2
            console.log(num, num2)
            console.log(this.tableHeight)
        },
        // 缩放滑动框的提示标签
        slideTooltip(val) {
            this.setMainSize(val)
            return `${val}%`
        },
        // drawer 打开时的回调
        drawerOpen() {
            this.getUserPicPageList()
        },
        // drawer 打开结束
        drawerOpened() {
            this.setTableHeight()
        },
        // drawer 关闭时的回调
        handleClose(done) {
            done()
        },
        // 获取页面数据
        async getUserPicPageList() {
            this.loading = true
            const obj = {
                picmanager: {
                    appid: this.botData.id,
                    picname: ''
                },
                pages: {
                    page: this.pages.page,
                    size: this.pages.size
                }
            }
            try {
                const {
                    data: { records, current, size, total }
                } = await getUserPicPageList(obj)
                this.tableData = records
                this.pages.page = current
                this.pages.size = size
                this.pages.total = total
            } catch (error) {
                console.log(error)
            } finally {
                this.loading = false
            }
        },
        // 页面选择表格选择事件
        handleCurrentTableRow(val) {
            let obj = {
                appid: this.botData.id,
                picid: val.picid
            }
            this.setAppPageData(obj)
            this.drawer = false
            this.checkedPage = '当前页面:' + val.picname
        },
        // 分页显示条数切换
        async handleSizeChange(newSize) {
            this.pages.size = newSize
            await this.getUserPicPageList()
        },
        // 分页当前页切换
        async handleCurrentChange(newPage) {
            this.pages.page = newPage
            await this.getUserPicPageList()
        }
    }
}
</script>
<style lang="scss" scoped>
// 清除 element el-card 的内边距
::v-deep .el-card__body {
    padding: 0;
    width: 100%;
    height: 100%;
}
::v-deep .el-drawer__header {
    margin-bottom: 0;
}
::v-deep .el-pagination {
    margin-top: 0;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
}

#topo-navber {
    width: 100%;
    height: 100%;
    .el-card {
        width: 100%;
        height: 100%;
        .top-card {
            width: 100%;
            height: 100%;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            .left-box {
                height: 100%;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                .page-checked {
                    height: 100%;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    margin-right: 20px;
                    .input-label {
                        width: 80px;
                    }
                    .page-input {
                        width: 180px;
                        padding: 7px;
                    }
                }
            }
            .content-box {
                height: 100%;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }
            .right-box {
                height: 100%;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                .slide-label {
                    padding-left: 15px;
                }
                .slide {
                    width: 400px;
                    height: 100%;
                    margin-left: 20px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }
            }
        }
    }
}
</style>
